<template>
	<view class="flex flex-column">
		<!-- 头部 -->
		<yHeader :current="6" :screenWidth="screenWidth" @Tabs="handleTabs"></yHeader>
		<!-- PC端 -->
		<view v-if="screenWidth > 480" class="py-4 bg-grey" style="height: 100%">
			<view class="__inner flex">
				<view class=" pb-4 flex flex-column w-100" style="height: 1030rpx">
					<!-- 标题 -->
					<view class="flex bg-white align-center border-bottom border-grey"
						style="box-sizing: border-box; height: 10%">
						<text class="font-lg ml-4 font-weight-bold pl-2 border-left" :class="'border-' + ThemeColors"
							style="border-left-width: 8rpx">服务类型</text>
					</view>
					<!-- 内容 -->
					<view class="flex align-center w-100 mt-2" style="height: 90%; justify-content: space-between">
						<view @click="handleSkip('/pages/finance/order-financing')"
							class="bg-white p-2 flex flex-column justify-between w-100 border-right border-grey hover"
							style="
                box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
                cursor: pointer;
                box-sizing: border-box;
                height: 90%;
                width: 30%;
                border-radius: 0 20rpx 20rpx 0rpx;
              ">
							<view class="flex-shrink flex justify-center w-100" style="height: 200rpx">
								<image class="rounded-circle" style="width: 200rpx; height: 200rpx"
									src="../../static/icon/order-financing.png" mode=""></image>
							</view>
							<view class="" style="height: 30%">
								<view class="">
									<text class="font font-weight-bold">订单融资</text>
								</view>
								<view class="">
									<text
										class="font-sm">企业凭借其购销合同和有生产能力、能提供有效担保的订单，向银行提出贷款申请。银行则根据企业的订单及合同，向企业提供贷款。企业在收到货款后，会立即偿还贷款。</text>
								</view>
							</view>
							<view style="height: 40%">
								<view class="border-bottom border-grey flex align-center hover"
									style="height: 20%; box-sizing: border-box">
									<text class="font font-weight-bold">最新消息</text>
								</view>
								<view style="width: 100%; height: 280rpx; overflow: hidden">
									<view v-for="i in 1" :key="i" class="flex align-center w-100 gun"
										style="height: 20%">
										<view class="line flex-shrink" :class="'bg-' + ThemeColors"></view>
										<text class="font-sm text-ellipsis"
											style="width: 720rpx">西货郎企业与20分钟前办理订单融资服务</text>
									</view>
								</view>
							</view>
						</view>
						<view @click="handleSkip('/pages/finance/warehouse-pledge')"
							class="bg-white p-2 flex flex-column justify-between w-100 border-right border-grey hover"
							style="
                box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
                cursor: pointer;
                box-sizing: border-box;
                height: 90%;
                width: 30%;
                border-radius: 20rpx;
              ">
							<view class="flex-shrink flex justify-center w-100" style="height: 200rpx">
								<image class="rounded-circle" style="width: 200rpx; height: 200rpx"
									src="../../static/icon/warehouse-pledge.png" mode=""></image>
							</view>
							<view class="" style="height: 30%">
								<view class="">
									<text class="font font-weight-bold">仓单质押</text>
								</view>
								<view class="">
									<text
										class="font-sm">作为一种新型的服务项目，在传统仓储企业向现代物流企业转型的过程中得到广泛应用。增值服务仓单质押在国外已经成为企业与银行融通资金的重要手段，也是仓储业增值服务的重要组成部分。</text>
								</view>
							</view>
							<view style="height: 40%">
								<view class="border-bottom border-grey flex align-center"
									style="height: 20%; box-sizing: border-box">
									<text class="font font-weight-bold">最新消息</text>
								</view>
								<view style="width: 100%; height: 280rpx; overflow: hidden">
									<view v-for="i in 0" :key="i" class="flex align-center gun w-100"
										style="height: 20%">
										<view class="line flex-shrink" :class="'bg-' + ThemeColors"></view>
										<text class="font-sm text-ellipsis"
											style="width: 720rpx">西货郎企业与20分钟前办理仓单质押服务</text>
									</view>
								</view>
							</view>
						</view>
						<view @click="handleSkip('/pages/finance/factoring')"
							class="bg-white p-2 flex flex-column justify-between w-100 border-right border-grey hover"
							style="
                box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
                cursor: pointer;
                box-sizing: border-box;
                height: 90%;
                width: 30%;
                border-radius: 20rpx 0 0 20rpx;
              ">
							<view class="flex-shrink flex justify-center w-100" style="height: 200rpx">
								<image class="rounded-circle" style="width: 200rpx; height: 200rpx"
									src="../../static/icon/factoring.png" mode=""></image>
							</view>
							<view class="" style="height: 30%">
								<view class="">
									<text class="font font-weight-bold">保付代理</text>
								</view>
								<view class="">
									<text
										class="font-sm">这种方式涉及到一个企业（卖方）将其现在或未来的基于其与另一个企业（买方）订立的货物销售/服务合同所产生的应收账款转让给保理商。</text>
								</view>
							</view>
							<view style="height: 40%">
								<view class="border-bottom border-grey flex align-center"
									style="height: 20%; box-sizing: border-box">
									<text class="font font-weight-bold">最新消息</text>
								</view>
								<view style="width: 100%; height: 280rpx; overflow: hidden">
									<view v-for="i in 0" :key="i" class="flex align-center w-100 gun"
										style="height: 20%">
										<view class="line flex-shrink" :class="'bg-' + ThemeColors"></view>
										<text class="font-sm text-ellipsis"
											style="width: 720rpx">西货郎企业与20分钟前办理保付代理服务</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-else-if="screenWidth <= 480" class="py-4 bg-grey" style="height: 100%">
			<view class="mx-2 bg-white flex mb-4">
				<view class="pb-4 flex flex-column w-100">
					<!-- 标题 -->
					<view class="flex align-center border-bottom border-grey" style="box-sizing: border-box">
						<text class="font-lg font-weight-bold pl-2 py-1 border-left" :class="'border-' + ThemeColors"
							style="border-left-width: 8rpx">订单融资</text>
					</view>
					<!-- 内容 -->
					<view class="flex align-center w-100">
						<view @click="handleSkip('/pages/finance/order-financing')" class="flex flex-column w-100"
							style="cursor: pointer; box-sizing: border-box">
							<view class="flex-shrink flex justify-center w-100 my-2" style="height: 200rpx">
								<image class="rounded-circle" style="width: 200rpx; height: 200rpx"
									src="../../static/icon/order-financing.png" mode=""></image>
							</view>
							<view class="w-100 flex flex-column align-center">
								<view class="">
									<text class="font font-weight-bold">介绍说明</text>
								</view>
								<view style="width: 95%">
									<text
										class="font-sm">企业凭借其购销合同和有生产能力、能提供有效担保的订单，向银行提出贷款申请。银行则根据企业的订单及合同，向企业提供贷款。企业在收到货款后，会立即偿还贷款。</text>
								</view>
							</view>
							<view class="mt-2 w-100 flex flex-column align-center">
								<view class="flex align-center" style="height: 20%; box-sizing: border-box">
									<text class="font font-weight-bold">最新消息</text>
								</view>
								<view style="width: 95%">
									<view v-for="i in 0" :key="i" class="flex align-center w-100" style="height: 50rpx">
										<view class="line flex-shrink" :class="'bg-' + ThemeColors"></view>
										<text class="font-sm text-ellipsis"
											style="width: 720rpx">西货郎企业与20分钟前办理仓单质押服务</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mx-2 bg-white flex mb-4">
				<view class="pb-4 flex flex-column w-100">
					<!-- 标题 -->
					<view class="flex align-center border-bottom border-grey" style="box-sizing: border-box">
						<text class="font-lg font-weight-bold pl-2 py-1 border-left" :class="'border-' + ThemeColors"
							style="border-left-width: 8rpx">仓单质押</text>
					</view>
					<!-- 内容 -->
					<view class="flex align-center w-100">
						<view @click="handleSkip('/pages/finance/order-financing')" class="flex flex-column w-100"
							style="cursor: pointer; box-sizing: border-box">
							<view class="flex-shrink flex justify-center w-100 my-2" style="height: 200rpx">
								<image class="rounded-circle" style="width: 200rpx; height: 200rpx"
									src="../../static/icon/warehouse-pledge.png" mode=""></image>
							</view>
							<view class="w-100 flex flex-column align-center">
								<view class="">
									<text class="font font-weight-bold">介绍说明</text>
								</view>
								<view style="width: 95%">
									<text
										class="font-sm">作为一种新型的服务项目，在传统仓储企业向现代物流企业转型的过程中得到广泛应用。增值服务仓单质押在国外已经成为企业与银行融通资金的重要手段，也是仓储业增值服务的重要组成部分。</text>
								</view>
							</view>
							<view class="mt-2 w-100 flex flex-column align-center">
								<view class="flex align-center" style="height: 20%; box-sizing: border-box">
									<text class="font font-weight-bold">最新消息</text>
								</view>
								<view style="width: 95%">
									<view v-for="i in 5" :key="i" class="flex align-center w-100" style="height: 50rpx">
										<view class="line flex-shrink" :class="'bg-' + ThemeColors"></view>
										<text class="font-sm text-ellipsis"
											style="width: 720rpx">西货郎企业与20分钟前办理仓单质押服务</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mx-2 bg-white flex">
				<view class="pb-4 flex flex-column w-100">
					<!-- 标题 -->
					<view class="flex align-center border-bottom border-grey" style="box-sizing: border-box">
						<text class="font-lg font-weight-bold pl-2 py-1 border-left" :class="'border-' + ThemeColors"
							style="border-left-width: 8rpx">保付代理</text>
					</view>
					<!-- 内容 -->
					<view class="flex align-center w-100">
						<view @click="handleSkip('/pages/finance/order-financing')" class="flex flex-column w-100"
							style="cursor: pointer; box-sizing: border-box">
							<view class="flex-shrink flex justify-center w-100 my-2" style="height: 200rpx">
								<image class="rounded-circle" style="width: 200rpx; height: 200rpx"
									src="../../static/icon/factoring.png" mode=""></image>
							</view>
							<view class="w-100 flex flex-column align-center">
								<view class="">
									<text class="font font-weight-bold">介绍说明</text>
								</view>
								<view style="width: 95%">
									<text
										class="font-sm">这种方式涉及到一个企业（卖方）将其现在或未来的基于其与另一个企业（买方）订立的货物销售/服务合同所产生的应收账款转让给保理商。</text>
								</view>
							</view>
							<view class="mt-2 w-100 flex flex-column align-center">
								<view class="flex align-center" style="height: 20%; box-sizing: border-box">
									<text class="font font-weight-bold">最新消息</text>
								</view>
								<view style="width: 95%">
									<view v-for="i in 5" :key="i" class="flex align-center w-100" style="height: 50rpx">
										<view class="line flex-shrink" :class="'bg-' + ThemeColors"></view>
										<text class="font-sm text-ellipsis"
											style="width: 720rpx">西货郎企业与20分钟前办理仓单质押服务</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter Show :screenWidth="screenWidth"></yFooter>
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from "@/components/yHeader.vue";
	import yFooter from "@/components/yFooter.vue";
	export default {
		components: {
			yHeader,
			yFooter,
		},
		data() {
			return {
				screenWidth: uni.getSystemInfoSync().windowWidth,
				screenHigth: uni.getSystemInfoSync().windowHeight,
				ThemeColors: app.globalData.ThemeColors,
			};
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			handleSkip(url) {
				uni.navigateTo({
					url,
				});
			},
		},
	};
</script>

<style>
	.hover:hover {
		transition: 0.5s;
		transform: translateY(-10rpx);
	}

	.line {
		height: 8rpx;
		width: 8rpx;
		margin-right: 11px;
	}

	.gun {
		animation: myscroll 5s linear infinite;
	}

	@keyframes myscroll {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-250rpx);
		}
	}
</style>